<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/23
  Time: 11:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>菜单管理</title>
    <%@include file="../../common/head.jsp" %>
</head>

<body>
<div id="wrapper">
    <%@include file="../../common/navi.jsp" %>

    <%--    <这里是中间主体>--%>
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <%@include file="../../common/row_head.jsp" %>


        <%--        <可更改地区>--%>
        <%--            <上面的分块 建议不要改div class中的东西>--%>
        <div class="row  border-bottom white-bg dashboard-header">
            <div class="col-sm-3">
                <h2>菜单管理</h2>
            </div>
        </div>

<%--        模态框删除确认--%>
        <div class="modal fade" id="delmode" tabindex="-1" role="dialog" aria-labelledby="myModalcon"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalcon"></h4>
                    </div>
                    <div class="modal-body">
                        <form id="statusconf">
                            <div class="form-group">
                                <input type="hidden" class="form-control" id="statuscid" name="statuscid" required=""
                                       value="">
                            </div>
                            <div class="form-group">
                                <input type="hidden" class="form-control" id="statusvild" name="statusvild" required=""
                                       value="">
                            </div>
                            <div class="form-group">
                                <div id="divestus"></div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >关闭
                        </button>
                        <button type="button" class="btn btn-danger" onclick="delconf()">修改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

<%--模态框添加确认--%>
        <div class="modal fade" id="addMenuMode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">添加菜单</h4>
                    </div>
                    <div class="modal-body">
                        <form id="addmenu">
                            <div class="form-group">
                                <label for="name">菜单名</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="菜单名">
                            </div>
                            <div class="form-group">
                                <label for="link">链接</label>
                                <input type="text" class="form-control" id="link" name="link" placeholder="链接">
                            </div>
                            <div class="form-group">
                                <label for="icon">图标</label>
                                <input data-placement="bottomRight" id="icon"  name="icon" class="form-control icp icp-auto iconpicker-element iconpicker-input"  type="text">
                            </div>
                            <div class="form-group">
                                <label for="role">角色</label>
                                <select class="form-control" id="role" name="role">

                                </select>
                            </div>
                            <div class="form-group">
                                <label for="active">状态</label>
                                <select class="form-control" id="active" name="active">
                                    <option value="0">有效</option>
                                    <option value="1">无效</option>
                                </select>
                            </div>
                            <button type="button" class="btn btn-danger" onclick="addmenu()">添加</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <%--模态框修改--%>
        <div class="modal fade" id="editMenuMode" tabindex="-1" role="dialog" aria-labelledby="myModalLabeledit"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabeledit">修改菜单</h4>
                    </div>
                    <div class="modal-body">
                        <form id="editmenu">
                            <div class="form-group">
                                <input type="hidden" class="form-control" id="ide" name="ide" placeholder="id">
                            </div>
                            <div class="form-group">
                                <label for="namee">菜单名</label>
                                <input type="text" class="form-control" id="namee" name="namee" placeholder="菜单名">
                            </div>
                            <div class="form-group">
                                <label for="linke">链接</label>
                                <input type="text" class="form-control" id="linke" name="linke" placeholder="链接">
                            </div>
                            <div class="form-group">
                                <label for="icone">图标</label>
                                <input data-placement="bottomRight" id="icone"  name="icone" class="form-control icp icp-auto iconpicker-element iconpicker-input"  type="text">
                            </div>
                            <div class="form-group">
                                <label for="rolee">角色</label>
                                <select class="form-control" id="rolee" name="rolee">

                                </select>
                            </div>
                            <div class="form-group">
                                <label for="activee">状态</label>
                                <select class="form-control" id="activee" name="activee">
                                    <option value="0">有效</option>
                                    <option value="1">无效</option>
                                </select>
                            </div>
                            <button type="button" class="btn btn-danger" onclick="editmenu()">修改</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <%--                <下面的分块 建议不要改div class中的东西>--%>
        <div class="row">
            <div class="col-lg-12">
                <div class="wrapper wrapper-content ">
                    <div class="ibox float-e-margins fadeInDown animated">
                        <div class="ibox-title" >
                            <h5>菜单管理</h5>
                            <%@include file="../../common/iboxtool.jsp"%>
                        </div>
                        <div class="ibox-content">
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addMenuMode">
                                添加菜单
                            </button>
                            <div class=" col-md-4 pull-right">  <select class="form-control" name="fatherSelect" id="fatherSelect" onclick="query()">
                                <option value=''>全部</option>
                            </select></div>

                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <table class="table table-hover table-bordered">
                                        <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>菜单</th>
                                            <th>父菜单</th>
                                            <th>链接</th>
                                            <th>图标</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="t_body">
                                        <tr>
                                            <td>1</td>
                                            <td>TB - Monthly</td>
                                            <td>01/04/2012</td>
                                            <td>Default</td>
                                            <td>Default</td>
                                            <td>Default</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <style>
                                    .pagemar{
                                        margin: 20px 0;
                                    }
                                </style>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-4">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination">
                                                    <li>
                                                        <a onclick=jumpPage(1)>
                                                            <span aria-hidden="true">首页</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:proPage();">上一页</a>
                                                    </li>
                                                    <li><a href="javascript:nextPage();">下一页</a></li>
                                                    <li>
                                                        <a href="javascript:lastPage();">
                                                            <span aria-hidden="true">尾页</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                        <div class="col-md-2 form-horizontal">
                                            <div class="form-group pagemar">
                                                <p class="form-control-static">当前第<span id="pageNum">1</span>页</p>
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-inline">
                                            <div class="form-group pagemar">
                                                <label class="sr-only" for="pageSize">Amount (in dollars)</label>
                                                <div class="input-group">
                                                    <div class="input-group-addon">每页</div>
                                                    <select class="form-control" id="pageSize" onchange="query()">
                                                        <option>5</option>
                                                        <option>10</option>
                                                        <option>20</option>
                                                    </select>
                                                    <div class="input-group-addon">条</div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-md-2 form-horizontal">
                                            <div class="form-group pagemar">
                                                <p class="form-control-static">共<span id="totalNum"></span>条数据</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <%@include file="../../common/foot.jsp" %>

    </div>

</div>



<%--自带--%>
<script>
    $(document).ready(function () {
        query();
        $('.icp-auto').iconpicker()
        $(".iconpicker-item").removeAttr("href")
            setTimeout(function () {
                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    showMethod: 'slideDown',
                    timeOut: 4000
                };
                toastr.success('欢迎来到菜单管理', '欢迎来到神舟-鸿蒙后台系统');
                queryfather();
            }, 1300);

            var data1 = [
                [0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
            ];
            var data2 = [
                [0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
            ];
            $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
                    data1, data2
                ],
                {
                    series: {
                        lines: {
                            show: false,
                            fill: true
                        },
                        splines: {
                            show: true,
                            tension: 0.4,
                            lineWidth: 1,
                            fill: 0.4
                        },
                        points: {
                            radius: 0,
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#d5d5d5",
                        borderWidth: 1,
                        color: '#d5d5d5'
                    },
                    colors: ["#1ab394", "#1C84C6"],
                    xaxis: {},
                    yaxis: {
                        ticks: 4
                    },
                    tooltip: false
                }
            );
            var doughnutData = [
                {
                    value: 300,
                    color: "#a3e1d4",
                    highlight: "#1ab394",
                    label: "App"
                },
                {
                    value: 50,
                    color: "#dedede",
                    highlight: "#1ab394",
                    label: "Software"
                },
                {
                    value: 100,
                    color: "#A4CEE8",
                    highlight: "#1ab394",
                    label: "Laptop"
                }
            ];
            var doughnutOptions = {
                segmentShowStroke: true,
                segmentStrokeColor: "#fff",
                segmentStrokeWidth: 2,
                percentageInnerCutout: 45, // This is 0 for Pie charts
                animationSteps: 100,
                animationEasing: "easeOutBounce",
                animateRotate: true,
                animateScale: false
            };
            // var ctx = document.getElementById("doughnutChart").getContext("2d");
            var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);

            var polarData = [
                {
                    value: 300,
                    color: "#a3e1d4",
                    highlight: "#1ab394",
                    label: "App"
                },
                {
                    value: 140,
                    color: "#dedede",
                    highlight: "#1ab394",
                    label: "Software"
                },
                {
                    value: 200,
                    color: "#A4CEE8",
                    highlight: "#1ab394",
                    label: "Laptop"
                }
            ];

            var polarOptions = {
                scaleShowLabelBackdrop: true,
                scaleBackdropColor: "rgba(255,255,255,0.75)",
                scaleBeginAtZero: true,
                scaleBackdropPaddingY: 1,
                scaleBackdropPaddingX: 1,
                scaleShowLine: true,
                segmentShowStroke: true,
                segmentStrokeColor: "#fff",
                segmentStrokeWidth: 2,
                animationSteps: 100,
                animationEasing: "easeOutBounce",
                animateRotate: true,
                animateScale: false
            };
            var ctx = document.getElementById("polarChart").getContext("2d");
            var Polarchart = new Chart(ctx).PolarArea(polarData, polarOptions);
        }
    );

</script>
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-4625583-2', 'webapplayers.com');
    ga('send', 'pageview');


</script>

<%--添加及刷新方法 转译时间--%>
<script>
    function timestampToTime(timestamp) {
        ///Date(1514736000000)/
        var date = new Date(timestamp * 1);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }

    function addmenu() {
        var d = "menu/add?" + $("#addmenu").serialize();
        console.log(d)
        $.post(d, {}, function (data) {
            console.log(data)
            if (data==3){ swal('创建有误',"菜单名未输入", 'error');}
            if (data==1){swal('成功',"添加菜单成功", 'success');
                queryfather();
                query();
               }
            if (data==2){ swal('添加失败',"请联系管理员或重试", 'error');}
            if(data==4){swal('添加失败',"菜单已存在", 'error')}
        },"json")
    }

    function refresh() {
        setUnM();
        setTimeout(function () {
            location.href = this.location.href;
        }, 1000);

    }

    function delconf(){
        $.post("menu/change", {
            id: $("#statuscid").val(),
            vlid: $("#statusvild").val()
        }, function (data) {
            if (data == 2) {
                swal('操作失败', "菜单不存在", 'error');
            }
            if (data == 1) {
                swal('成功', "操作成功，1秒自动刷新页面", 'success');
                refresh();

            }
            if (data == 3) {
                swal('操作失败', "服务器失效，请联系管理员", 'error');
            }
        }, "json")
    }

</script>

<%--ajax查询和跳转--%>
<script>
function editmenu(){
        var d = "menu/edit?" + $("#editmenu").serialize();
        console.log(d)
        $.post(d, {}, function (data) {
            console.log(data)
            if (data==3){ swal('修改有误',"菜单名未输入", 'error');}
            if (data==1){swal('成功',"修改菜单成功，1秒自动刷新页面", 'success');
                refresh();
            }
            if (data==2){ swal('修改失败',"请联系管理员或重试", 'error');}
        },"json")
}


    function queryfather(){
        var url="menu/father";

        var param={
        }
        $.post(url,{},function (result){
            console.log(result);
            $("#fatherSelect").empty();
            $("#role").empty();
            $("#rolee").empty();
            $("#fatherSelect").append("<option value=''>全部</option> <option value='0'>父类</option>");
            $("#role").append("<option value='0'>父类</option>");
            $("#rolee").append("<option value='0'>父类</option>");
            $.each(result, function (i, menuf){
                let  h1
                if (menuf.status==0){
      h1+=  " <option value="+menuf.id+">" ;
                h1+=menuf.name;
                h1+="</option>"}
                $("#fatherSelect").append(h1);
                $("#role").append(h1);
                $("#rolee").append(h1);
            })

        },"json")
    }

    function query() {
        var url = "menu";
        var param = {
            "pageNum": $("#pageNum").text(),
            "pageSize": $("#pageSize").val(),
            "fatherid":$("#fatherSelect option:selected").val(),

        };

        $.post(url, param, function (result) {
            // console.log(result)
            $("#t_body").empty();
            $.each(result.list, function (i, menuPage) {
                var list=result;
                // console.log(list)
                let html = "<tr>";
                html += "<td>" + menuPage.id + "</td>";
                html += "<td>" + menuPage.name + "</td>";
                html += "<td>";
                if(menuPage.pid==0){
                    html+="总类";
                }else{html+=menuPage.fatherName;}

                    html += "</td>";
                    html += "<td><a href=' " + menuPage.link + "' target='_blank'>" + menuPage.link + "</td>";
                    html += "<td><div class='" + menuPage.icon + "'></div></td>";
                    // html += "<td>caozuo</td>";
                    html += "<td><button type='button' class='btn btn-default'  value=" + menuPage.id +
                        " onclick= 'edit(this.value)'" + ">修改</button>&nbsp;";
                    if (menuPage.status == 0) {
                        html += "<button type='button' class='btn btn-Success'  value=" + menuPage.id +
                            " onclick='editstuatsm(this.value,&quot;" + menuPage.name + "&quot;,&quot;" + menuPage.status + "&quot;)'" + ">有效</button></td>";
                    }
                    if (menuPage.status == 1) {
                        html += "<button type='button' class='btn btn-warning'  value=" + menuPage.id +
                            " onclick='editstuatsm(this.value,&quot;" + menuPage.name + "&quot;,&quot;" + menuPage.status + "&quot;)'" + ">无效</button></td>";
                    }
                    html += "</tr>";
                    $("#t_body").append(html);
                })
            pageData(result);
        }, "json")
    }

    function proPage() {
        var pageNum = parseInt($("#pageNum").text()) - 1;
        if (pageNum > 0) {
            $("#pageNum").text(pageNum)
            query();
        }
    }

    function nextPage() {
        var pageNum = parseInt($("#pageNum").text()) + 1;
        if (pageNum <= totalPage) {
            $("#pageNum").text(pageNum)
            query();
        }
    }

    function jumpPage(pageNum) {
        $("#pageNum").text(pageNum)
        query();
    }

    function lastPage() {
        //最后一页？
        $("#pageNum").text(totalPage)
        query();
    }

    var totalPage = 0;

    function pageData(page) {
        $("#pageNum").text(page.pageNum)
        $("#totalNum").text(page.totalNum)
        totalPage = page.totalPage
    }</script>

<%--模态框控制--%>
<script>

    function edit(value) {
        console.log(value)
        $("#ide").val(value);
        $.post("menu/query",{id:value},function (result){
            console.log(result);
            if (result==1){
                swal('操作失败', "读取用户出错，请联系管理员", 'error');
            }else {
                $("#namee").val(result.name);
                $("#linke").val(result.link);
                $("#icone").val(result.icon);
                $("#rolee").val(result.pid);
                $("#activee").val(result.status);
            }
        },"json")

        $('#editMenuMode').modal('show');
    }

    function editstuatsm(value, name, vild) {
        console.log(value);
        $('#delmode').modal('show');
        $("#statuscid").val(value);
        $("#divestus").html("您确定要修改" + name + "的状态吗");
        $("#statusvild").val(vild);
        $("#myModalcon").html("修改确认");
    }

</script>


</body>
</html>
